<template>
	<div class="makelist" v-show="showmakelist">
		<!-- 销售开单 -->
		<p style="margin-left:10px;">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-RSS_flat"></use>
			</svg>
			<span>销售开单</span>
		</p>
		<ul class="list">
			<li><span>出货</span></li>
			<li><span>退货</span></li>
			<li><span>收款</span></li>
		</ul>
		<!-- 采购开单 -->
		<p style="margin-left:10px;">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-tune-up_flat"></use>
			</svg>
			<span>采购开单</span>
		</p>
		<ul class="list">
			<li><span>进货</span></li>
			<li><span>退货</span></li>
			<li><span>付款</span></li>
		</ul>
		<!-- 其他选项卡 -->
		<ul class="list">
			<li>
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-searchinfographic_flat"></use>
				</svg>
				其他收入
			</li>
			<li>
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-target_flat"></use>
				</svg>
				其他支出
			</li>
			<li>
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-crown_flat"></use>
				</svg>
				预订单
			</li>
		</ul>
		<!-- 退出 -->
		<div style="text-align: center;line-height:50px;width:100%;" @click="hidemakelist">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-diamond_flat"></use>
			</svg>
		</div>
	</div>
</template>

<script>
	// 只需要在通信的兄弟组件间导入bus事件总线
	import bus from "../bus.js"
	export default {
		name: "makelist",
		data() {
			return {
				showmakelist: false
			}
		},
		methods: {
			hidemakelist() {
				this.showmakelist = false
			}
		},
		mounted() {
			bus.$on("showmakelist", (data) => {
				this.showmakelist = data
			})
		}
	}
</script>

<style scoped="scoped">
	ul,
	li,
	p {
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style: none;
	}

	p span {
		font-weight: bold;
		font-size: 12px;
		margin-left: 5px;
	}

	.list {
		display: flex;
		text-align: center;
		justify-content: center;
	}

	.list li {
		width: 40%;
		line-height: 30px;
	}

	.list li span {
		border: 1px solid lightblue;
		color: lightblue;
		/* 上左下右 */
		padding: 5px 10px 5px 10px;
		font-size: 10px;
	}

	.makelist {
		background-color: white;
		width: 90%;
		position: fixed;
		left: 5%;
		right: 5%;
		bottom: 100px;
		padding: 5px;
		z-index: 10;
		border: 1px solid lightblue;
		border-radius: 5%;
	}

	.icon {
		width: 1.5em;
		height: 1.5em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}
</style>
